<template>
  <div class="container">
    <el-row :gutter="10" class="mt10">
      <el-col :span="6">
        <el-card shadow="hover">
          <i class="el-icon-user"></i>
          <el-divider direction="vertical"></el-divider>
          <span>用户总数</span>
          <el-divider direction="vertical"></el-divider>
          <span style="margin-left: 15px">{{userNum}}</span>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover">
          <i class="el-icon-user-solid"></i>
          <el-divider direction="vertical"></el-divider>
          <span>在线人数</span>
          <el-divider direction="vertical"></el-divider>
          <span style="margin-left: 15px">{{userOnlineNum}}</span>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover">
          <i class="el-icon-tickets"></i>
          <el-divider direction="vertical"></el-divider>
          <span>检测总数</span>
          <el-divider direction="vertical"></el-divider>
          <span style="margin-left: 15px">{{detectNum}}</span>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover">
          <i class="el-icon-thumb"></i>
          <el-divider direction="vertical"></el-divider>
          <span>通知总数</span>
          <el-divider direction="vertical"></el-divider>
          <span style="margin-left: 15px">{{noticeNum}}</span>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="10" class="mt10">
      <el-col :span="12">
        <el-card>
          <BarChart style="width: 100%;height: 590px" />
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <pie-chart style="width: 100%;height: 590px"  :info="this.chartInfo"/>
        </el-card>
      </el-col>
    </el-row>

  </div>
</template>
<script type="text/javascript">
import { list} from "@/api/monitor/online";
import {listUser} from "@/api/system/user";
import {listNotice} from "@/api/system/notice";
import {detectTypeInfo, listHistoryInfo} from "@/api/system/historyInfo";
import PieChart from "@/views/dashboard/PieChart";
import BarChart from "@/views/dashboard/BarChart";
export default {
  name: "Index",
  components: {
    PieChart,
    BarChart
  },
  data() {
    return {
      chartInfo:{'title.text':'检测类别统计','tooltip.trigger':'检测类别'},
      userNum:0,
      userOnlineNum:0,
      detectNum:0,
      noticeNum:0
    };
  },
  created() {
    this.init();
  },
  methods:{
    init(){
      list().then(res=>{
        this.userOnlineNum=res.total;
      })
      listUser().then(res=>{
        this.userNum=res.total;
      })
      listNotice().then(res=>{
        this.noticeNum=res.total;
      })
      listHistoryInfo().then(res=>{
        this.detectNum=res.total;
      })
    },
  }
};
</script>

<style scoped lang="scss">
</style>

